<template>
    <div class="isTaxRule_back" @click.stop="closeClick">
        <div class="isTaxRule" @click.stop="">
            <div class="isTaxRule_item" v-for="(item, index) in dataArr" :key="index">
                <div class="item_title">{{ item.title }}</div>
                <p v-for="ite in item.textArr" :key="ite">{{ ite }}</p>
                <div class="item_number">平台服务费：{{ item.number }}%</div>
            </div>
            <img class="isTaxRule_close" src="@/assets/images/depot/icon_guanbi.png" alt="" @click.stop="closeClick">
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue'
const emit = defineEmits(['close'])

const dataArr = ref([
    {
        title: '食品饮品',
        textArr: ['食品：坚果糖类、速食类、糕点类、豆制品类、休闲类、调味品类、原料类。', '冲调类：藕粉、麦片、食补粉、速溶咖啡、咖啡豆/粉、乳制品。', '液态类：饮料、水等。'],
        number: '2'
    },
    {
        title: '医疗保健',
        textArr: ['医疗器械：雾化器、健康检测、医用防护用品、制氧/储氧设配、血糖仪、心电/血氧仪、呼吸机、助听器、体温计、体外检测、理疗仪器。', '保健类：维C类、鱼油类、褪黑素等。'],
        number: '5'
    },
    {
        title: '珠宝配饰',
        textArr: ['珠宝：翡翠、和田玉、黄金、白银、琥珀、蜜蜡、珍珠、钻石等。', '手表、钟表等。'],
        number: '5'
    },
    {
        title: '茶酒生鲜',
        textArr: ['酒：啤酒、白酒、红酒、洋酒等 。', '茶叶：普洱、白茶、红茶、绿茶、黑茶、养生茶等。', '生鲜：水果、肉禽类、海鲜类、蔬菜类、预制菜类、冷冻/冷藏类等。'],
        number: '2'
    },
    {
        title: '鞋服箱包配饰',
        textArr: ['鞋：运动鞋、休闲鞋、情侣鞋、童鞋等。', '服装：男装、女装、情侣装、休闲装、妈妈装、内衣、家居服等。', '箱包：拉杆箱、男包、女包、双肩包等。', '配饰：皮带、帽子、围巾、手套等。'],
        number: '5'
    },
    {
        title: '个护清洁',
        textArr: ['湿厕纸、湿巾、纸抽、卷纸。'],
        number: '2.5'
    },
    {
        title: '个护清洁',
        textArr: ['口腔护理、身体护理、洗护类等。'],
        number: '5'
    },
    {
        title: '3C数码家电',
        textArr: ['数码：手机、电脑、照相机、智能设备、投影设备等。', '家电类：冰箱、电视、洗衣机、空调、电暖器等。'],
        number: '2'
    },
    {
        title: '美妆护肤',
        textArr: ['国际大牌、国内知名品牌'],
        number: '2'
    },
])

const closeClick = () => {
    emit('close')
}
</script>

<style lang="scss" scoped>
.isTaxRule_back {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;

    .isTaxRule {
        width: 1222px;
        background: #FFFFFF;
        box-shadow: 0px 2px 15px 0px rgba(255, 255, 255, 0.8);
        padding: 20px 0 0 20px;
        display: flex;
        flex-wrap: wrap;
        border-radius: 10px;
        position: relative;

        .isTaxRule_item {
            width: 380px;
            margin: 0 20px 20px 0;
            padding: 20px 15px 0;
            background: #F6FCFF;
            border-radius: 10px;

            .item_title {
                font-weight: 500;
                font-size: 18px;
                color: #1B1D1E;
                margin-bottom: 15px;
            }

            p {
                font-weight: 400;
                font-size: 14px;
                color: #1B1D1E;
                margin-bottom: 10px;
            }

            .item_number {
                font-weight: 500;
                font-size: 14px;
                color: #0094FF;
                margin-bottom: 20px;
            }
        }

        .isTaxRule_close {
            position: absolute;
            right: 8px;
            top: 7px;
            width: 15px;
            height: 15px;
            cursor: pointer;
        }
    }
}
</style>